當我們在重新刷新一個頁面時，即使使用者沒新增任何內容，瀏覽器也會重新的去撈取許多資料
為了減輕這樣的 loading，於是就有了 Ajax 技術

例如，在任何平台註冊一個帳號時，要檢查帳號是否有被使用過，我們只需用 Ajax 技術，詢問遠端的伺服器，不同於以往要重新刷新頁面詢問遠端伺服器，再撈取相同的資料

首先我們先建立一個 XMLHttpRequest 物件:
這裡依照不同的步驟分別在 console 查看 XMLHttpRequest 物件的 readyState 狀態

const xhr = new XMLHttpRequest();

此時在 console 查看，readyState 會是 0，代表已經新增了一個 XMLHttpRequest 物件，但還沒連結到要撈取的資料

接著使用 open 方法:

xhr.open('get','https://hexschool.github.io/ajaxHomework/data.json',true);

而 open() 分別要帶三個參數
第一個是 get(讀取資料) 或 post(傳送資料)
第二個是要連結的網址
第三個是同步與非同步(後面在說明)
這裡我們要讀取資料所以使用 get

此時在 console 查看，readyState 會是 1，代表已經用了 open()，但還沒有把資料傳送過去

接著使用 send 方法:

xhr.send(null);

因為我們只是要讀取資料而已，所以傳送空值
此時在 console 查看，readyState 會是 4，代表已經完全撈取到資料，數據已經接收到
這時候查看 responseText 會發現資料已經被帶進來了

另外補充 readyState 的 2 & 3:
readyState = 2，代表偵測到用了 send()
readyState = 3，代表資料過於龐大還在 loading 中

上述撈取完資料後，接著我們就要去做資料的處理
這時候如果在 console 查看 xhr.responseText 會發現是空的
這個就是非同步的觀念，也是 open() 的第三個參數
當參數為 true 代表非同步，不會等資料傳送回來，就會讓程式碼繼續往下跑，等到回傳才會自動回傳
當參數為 false 代表同步，等資料傳送回來，才會讓程式碼繼續往下跑

當然如果要快速解決上面的問題，把第三個參數改成 false 即可
但許多情況會採用非同步的設計，因為有時候撈取的資料過大，不可能等資料傳送回來才去執行後面的程式碼

所以可以使用 onload 方法，代表資料成功傳送回來即會觸發此方法

xhr.onload = function(){
    let str = JSON.parse(xhr.responseText);
    console.log(str[0].name);
}

這時候 console 就會有資料了
但是傳送回來的資料型態會是字串，需把它轉回去 JSON 格式來做處理
所以上述使用 JSON.parse() 來轉回去 JSON 格式，進行資料的處理

綜合以上的結論:

1. 建立一個 XMLHttpRequest
2. 傳送資料到遠端伺服器
3. 回傳資料到自己的瀏覽器
4. 處理撈取到的資料

補充:
在執行 onload 的時候，可以透過判斷 xhr.status 的狀態碼，來進一步確認資料是否有撈取成功，若為 200 代表成功，404 則為失敗

xhr.onload = function(){
    if(xhr.status == 200){
        ....
    }
}